<template>
	<div class="main_container">
		<el-container>
			<!--头部-->
			<el-header>
				<div class="logo_box">
					<!--logo-->
					<img src="../assets/img/classroom.png" alt="教室">
					<span>学校教室在线管理系统</span>
				</div>
				<div class="my_box">
					<div class="welcome">欢迎你:{{ code }}</div>
					<el-dropdown @command="commandMethod">
						<span class="el-dropdown-link">
							<img src="../assets/img/avatar.gif" v-if="user.avatar==undefined">
							<img :src="user.avatar" v-else-if="user.avatar!=undefined" />
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item icon="el-icon-s-tools" @click.native="personal">设置</el-dropdown-item>
							<el-dropdown-item icon="el-icon-s-order" command="history">借用历史</el-dropdown-item>
							<el-dropdown-item icon="el-icon-switch-button" command="quit">退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-header>
			<el-container>
				<el-aside style="width: auto;">
					<MainMenu :isopen="isopen"></MainMenu>
					<i :class="getMenuCollapse()" @click="handleCollapse"></i>
				</el-aside>
				<el-main>
					<div class="textBox" @mouseover="mouseover" @mouseleave="mouseleave">
						<transition name="slide">
							<p class="text" :key="text.val.id" @click="gan">
								{{text.val.title}}
							</p>
						</transition>
					</div>
					<el-tabs v-model="$store.state.maintabs.activeRoute" type="border-card" closable
						@tab-click="clickTab" @tab-remove="removeTab">
						<el-tab-pane v-for="item  in $store.state.maintabs.maintabs" :key="item.route"
							:label="item.name" :name="item.route"></el-tab-pane>
					</el-tabs>
					<el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
						<span>您的邮箱为空，建议您去修改</span>
						<span slot="footer" class="dialog-footer">
							<el-button @click="dialogVisible = false">取 消</el-button>
							<el-button type="primary" @click="go()">确 定</el-button>
						</span>
					</el-dialog>

					<el-dialog title="公告" :visible.sync="dialog" width="50%">
						<mavon-editor v-model="noticeResult.content" defaultOpen="preview" :toolbarsFlag="false"
							:subfield="false" :preview="true">
						</mavon-editor>
					</el-dialog>

					<el-drawer title="学校教室管理小助手" :visible.sync="dialogZ" xdirection="rtl" size="30%">
						<div class="list" id="list" ref="list" style="oxverflow-x: auto;">
							<div v-for="item in chatList">
								<LeftItem :content="item.robotText" v-if="item.robot==true"></LeftItem>
								<RightItem :content="item.textChat" :img="user.avatar" v-if="item.me==true"></RightItem>
							</div>
							
						</div>
						<div class="bottom">
							<div class="input-send" >
								<el-input v-model="mytext" placeholder="请输入聊天内容..." class="input"
									@keyup.enter.native="send"/>
								<el-button plain type="info" class="send" @click="send" style="position: absolute;right: 0;">发送</el-button>
							</div>

						</div>
					</el-drawer>
					<i class="el-icon-chat-dot-round" style="position: absolute;right: 0;bottom: 0;font-size: 50px;" v-if="dialogZ==false" @click="dialogZ=true"></i>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import MainMenu from '../components/MainMenu.vue'
	import LeftItem from '../components/LeftItem.vue'
	import RightItem from '../components/RightItem.vue'
	import {
		setJwtToken,
		getTokenUser
	} from '../../lib/utils.js'
	import {
		mapMutations
	} from 'vuex'; //将mutations映射过来
	import {
		getUserInfo,
		emailIsNull,
		findNotice,
		findNotices,
		send,
	} from '../../api/system.js'

	export default {
		name: "Main",
		components: {
			MainMenu,
			LeftItem,
			RightItem,
		},
		data() {
			return {
				isopen: false,
				activePath: '',
				code: '',
				dialogVisible: false,
				user: {},
				notice: [],
				number: 0,
				timer: undefined,
				dialog: false,
				noticeResult: [],
				dialogZ: true,
				mytext:'',
				chatList:[{
					robotText: '有什么能够帮助您的吗？',
					textChat:'',
					robot: true,
					me: false,
				}],
				chat: {
					"perception": {
						"inputText": {
							"text": " "
						},

					},
					"userInfo": {
						"apiKey": "3d5a6f37f5764bb5bc4606c5f020c043",
						"userId": " "
					}
				},
				// text:undefined,
			}
		},
		methods: {
			...mapMutations(['setActiveRoute', 'addTab']),
			commandMethod(command) {
				if (command == 'quit') {
					window.sessionStorage.clear();
					this.$router.push('/');
				} else if (command == 'history') {
					if (this.user.identity == 2) {
						this.$router.push("/main/adminlist");
					} else {
						this.$router.push("/main/history");
					}
				}
			},
			personal() {
				this.$router.push({
					name: "personal"
				}); //路由切换显示personal个人中心
			},
			handleCollapse() {
				this.isopen = !this.isopen
			},
			getMenuCollapse() {
				return {
					"el-icon-d-arrow-left": !this.isopen,
					"el-icon-d-arrow-right": this.isopen
				}
			},
			removeTab(targetName) {
				if (targetName !== "/main/home") {
					this.$store.commit('removeTab', targetName);
					this.$router.push(this.$store.state.maintabs.maintabs[this.$store.state.maintabs.maintabs.length - 1]
						.route)
				}
			},
			clickTab(tab) {
				this.$router.push(tab.$options.propsData.name)
			},

			getUserName() {
				getUserInfo().then(res => {
					this.code = res.data1.name;
				})
			},
			getEmailIsNull() {
				emailIsNull(getTokenUser()).then(res => {
					if (res.isok && res.data1) {
						this.dialogVisible = true;
					}
				})
			},
			go() {
				this.dialogVisible = false;
				this.personal();
			},
			getUid() {
				getUserInfo().then(res => {
					this.chat.userInfo.userId = res.data1.id;
					this.user = res.data1;
				})
			},
			startMove() {
				this.timer = setTimeout(() => {
					this.number += 1;
					if (this.number === this.notice.length) {
						this.number = 0;
					}
					this.startMove();
				}, 2500);
			},
			mouseover() {
				clearInterval(this.timer);
			},
			mouseleave() {
				this.startMove();
			},
			gan() {
				findNotice(this.notice[this.number].id).then(res => {
					this.noticeResult = res.data1;
					this.dialog = true;

				}).catch(err => {
					this.$message("出现了未知错误！");
				})
			},
			send() {
				this.chat.perception.inputText.text = this.mytext;
				this.chatList[this.chatList.length-1].textChat = this.mytext;
				this.chatList[this.chatList.length-1].me = true;
				this.mytext = '';
				this.$http.post('/apii/openapi/api/v2', this.chat).then(res => {
					this.chatList.push({
						robotText: res.data.results[0].values.text,
						textChat:'',
						robot: true,
						me: false,
					})
					console.log(res.data.results[0].values.text);
				})
				// send('/v2',JSON.stringify(this.chat)).then(res=>{
				// 	console.log(res);
				// })
			}

		},
		created() {
			this.getUid();
			this.getUserName();
			this.getEmailIsNull();
			findNotices().then(res => {
				this.notice = res.data1;
			})
		},
		computed: {
			text() {
				return {
					val: this.notice[this.number] == undefined ? '' : this.notice[this.number]
				}
			}
		},
		// watch:{
		// 	text:function(){
		// 		this.text.val = this.notice[this.number];
		// 	}
		// },
		mounted() {
			this.startMove()
		},
	}
</script>

<style lang="scss" scoped>
	.main_container,
	.el-container {
		height: 100%;
	}

	/*头部布局*/
	.el-header {
		background-color: #0d335d;
		display: flex;
		justify-content: space-between;
		padding-left: 0;
		align-items: center;

		.logo_box {
			display: flex;
			align-items: center;

			img {
				height: 50px;
				width: 50px;
			}

			span {
				font-size: 18px;
				margin-left: 10px;
				color: #fff;
			}
		}

		.my_box {
			.welcome {
				color: #fff;
				position: absolute;
				right: 100px;
				top: 22px;
			}

			img {
				height: 50px;
				width: 50px;
				border-radius: 50%;
			}

			.el-dropdown-link {
				cursor: pointer;
				color: #409EFF;
			}

			.el-icon-arrow-down {
				font-size: 12px;
			}
		}
	}

	.el-aside {
		background-color: #0d335d;
		text-align: center;

		i {
			color: white;
			display: flex;
			position: absolute;
			bottom: 0;

			el-icon-d-arrow-left,
			el-icon-d-arrow-right {
				size: 30px;
			}
		}
	}

	.el-main {
		background-color: #E9EEF3;

		/deep/ .el-tabs--border-card>.el-tabs__content {
			padding: 0;
		}

		.textBox {
			width: 100%;
			height: 40px;
			margin: 0 auto;
			overflow: hidden;
			position: relative;
			text-align: center;
		}

		.text {
			width: 100%;
			position: absolute;
			bottom: 0;
		}

		.slide-enter-active,
		.slide-leave-active {
			transition: all 0.5s linear;
		}

		.slide-enter {
			transform: translateY(20px) scale(1);
			opacity: 1;
		}

		.slide-leave-to {
			transform: translateY(-20px) scale(0.8);
			opacity: 0;
		}

		.list {
			width: 100%;
			height: 670px;
			border: 1px blue;
		}

		el-drawer {
			position: relative;

			/deep/.bottom {
				position: absolute;
				bottom: 0px;

				.input-send {
					el-input {
						width: 75%;
					}

					el-button {
						position: absolute;
						right: 0px;
					}
				}
			}
		}



	}
</style>
